import React, { useState } from 'react'

export default function App() {
  console.log('app执行了')
  // useState调用一次,创建一个状态数据
  // const [数据, 修改数据的方法] = useState(初始值)

  // 注意:
  // 1. useState自动帮我们实现了性能优化,如果状态数据没有变化,则不会频繁更新了
  // 2. 函数组件更新,函数组件中所有代码会重新执行,但是useState内部会记录是不是第一次执行,如果是则初始值生效,如果不是则初始值不生效
  // 3. 每一次数组解构数据和修改数据的方法都是赋值给了新创建的两个常量.不存在给常量重新赋值的情况
  const [count, setCount] = useState(0)
  const [msg, setMsg] = useState('hello hook')

  return (
    <div>
      App
      <p>{count}</p>
      <p>{msg}</p>
      <button
        onClick={function () {
          // setCount(目标值)
          // const newCount = count + 1
          // setCount(newCount)
          setCount(count + 1)
        }}
      >
        +
      </button>
      <button
        onClick={function () {
          // setCount(目标值)
          // const newCount = count + 1
          // setCount(newCount)
          setMsg('xxx')
        }}
      >
        修改msg
      </button>
    </div>
  )
}
